<div class="container_16">
    <div class="grid_6 push_1 containerHeight">
        <form id="form" action="backend/personal/datosPersonales/actualizar" method="post">
            <fieldset style="border-color: red;">
                <legend><h2>Datos de Usuario</h2></legend>
                <center>
                    <table>
                        <tbody>
                        <tr>
                            <td>Nombre</td>
                            <td>Apellidos</td>
                        </tr>
                        <tr>
                            <td><input size="10px" type="text" name="nombre" value="<?=$datos[0]->nombre?>"/></td>
                            <td><input type="text" name="apellidos" value="<?=$datos[0]->apellidos?>"/></td>
                        </tr>
                        <tr>
                            <td>DNI</td>
                            <td>Fecha de Nacimiento</td>
                        </tr>
                        <tr>
                            <td><input size="10px" type="text" name="dni" value="<?=$datos[0]->dni?>"/></td>
                            <td><input id="fecha" type="text" name="fechaNacimiento" value="<?=$datos[0]->fechaNacimiento?>"/></td>
                        </tr>
                        <tr>
                            <td>Dirección</td>
                            <td>Población</td>
                        </tr>
                        <tr>
                            <td><input size="20px" type="text" name="direccion" value="<?=$datos[0]->direccion?>"/></td>
                            <td><input type="text" name="poblacion" value="<?=$datos[0]->poblacion?>"/></td>
                        </tr>
                        </tbody>
                    </table>
                </center>
            </fieldset>
            <fieldset style="border-color: red; margin-top: 20px;">
                <legend><h2>Datos de Contacto</h2></legend>
                <center>
                    <table>
                        <tbody>
                        <tr>
                            <td>Teléfono</td>
                            <td>Mail</td>
                        </tr>
                        <tr>
                            <td><input size="10px" type="text" name="telefono" value="<?=$datos[0]->telefono?>"/></td>
                            <td><input type="text" name="mail" value="<?=$datos[0]->mail?>"/></td>
                        </tr>
                        </tbody>
                    </table>
                </center>
            </fieldset>
            <input type="hidden" name="id" value="<?=$datos[0]->id?>"/>
            <button id="actualizar" type="button" value="Actualizar" style="margin-top: 30px">Actualizar</button>
        </form>
    </div>
    <div class="grid_3 push_2" style="border-color: black; margin-top: 30px">
        <img src='images/personal/personal.png' alt=''/>
    </div>
</div>
    <div id="oculto" style="display: none;">
        Se han guardado los cambios
    </div>
<style>
    table tr td {
        font-weight: bold;
    }
</style>
<script>
    $(function() {
        $( "#fecha" ).datepicker({
            dateFormat: "dd-mm-yy",
            changeMonth: true,
            changeYear: true});
    });

    $("#actualizar").click(function () {
        $('#oculto').dialog({modal:true,
            height:150,
            width:250,
            resizable:false,
            buttons:[
                {
                    text:"Aceptar",
                    click:function () {
                        $(this).dialog("close");
                    }
                }
            ]
        });
        $("#form").submit();
    });
</script>